<template>
<details open=""><summary>显示类型声明</summary><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">interface</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> Sort</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  prop</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> string</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  order</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">:</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;"> 'ascending'</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;"> |</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;"> 'descending'</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  init</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> any</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  silent</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> any</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">interface</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> TreeNode</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  expanded</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> boolean</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  loading</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> boolean</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  noLazyChildren</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> boolean</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  indent</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> number</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  level</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> number</span></span>
<span class="line"><span style="--shiki-light: #E36209; --shiki-dark: #FFAB70;">  display</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">?:</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> boolean</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">}</span></span></code></pre></div></details>

<h2 id="常见问题解答-faq" tabindex="-1">常见问题解答（FAQ） <a class="header-anchor vp-link" href="#常见问题解答-faq" aria-label="Permalink to &quot;常见问题解答（FAQ）&quot;">​</a></h2>
<h4 id="如何在表格中使用图像预览" tabindex="-1">如何在表格中使用图像预览？ <a class="header-anchor vp-link" href="#如何在表格中使用图像预览" aria-label="Permalink to &quot;如何在表格中使用图像预览？&quot;">​</a></h4>
<div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">el-table-column</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> label</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">=</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;">"Thumbnail"</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;"> width</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">=</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;">"180"</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">    &lt;template #default="scope"&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">        &lt;div style="display: flex; align-items: center"&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">            &lt;el-image :preview-src-list="srcList"/&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">        &lt;/div&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">    &lt;/template&gt;</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&lt;/</span><span style="--shiki-light: #22863A; --shiki-dark: #85E89D;">el-table-column</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">&gt;</span></span></code></pre></div>
<p>注：由于固定列是通过 sticky 来实现的，如果表格中含有固定列，请在图像上添加 <code>preview-teleported</code> 属性。</p>
<h4 id="当使用-dom-模板时-为什么列没有渲染" tabindex="-1">当使用 DOM 模板时，为什么列没有渲染？ <a class="header-anchor vp-link" href="#当使用-dom-模板时-为什么列没有渲染" aria-label="Permalink to &quot;当使用 DOM 模板时，为什么列没有渲染？&quot;">​</a></h4>
<p>典型问题： <a href="https://github.com/element-plus/element-plus/issues/5046" class="vp-link" target="_blank" rel="noreferrer">#5046<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> <a href="https://github.com/element-plus/element-plus/issues/5862" class="vp-link" target="_blank" rel="noreferrer">#5862<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> <a href="https://github.com/element-plus/element-plus/issues/6919" class="vp-link" target="_blank" rel="noreferrer">#6919<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p>
<p>这是因为 HTML 定义只允许一些特定元素省略关闭标签，最常见的是 <code>&lt;input&gt;</code> 和 <code>&lt;img&gt;</code>。 对于任意其他元素，如果你省略了关闭标签，原生的 HTML 解析器会认为你从未关闭打开的标签。</p>

</template>
<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>